<template>
  <BasePage title="角色切换" description="切换您的系统角色">
    <!-- 当前角色 -->
    <div class="mb-4 p-4 bg-green-50 border border-green-100 rounded-lg">
      <div class="flex items-center">
        <User class="w-5 h-5 text-green-500 mr-2" />
        <div>
          <div class="text-sm text-green-600">当前角色</div>
          <div class="font-medium text-green-800">辅导员</div>
        </div>
      </div>
    </div>
    
    <!-- 可切换角色列表 -->
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
      <div class="divide-y divide-gray-100">
        <div 
          v-for="role in availableRoles" 
          :key="role.id"
          class="p-4 hover:bg-gray-50 transition-colors cursor-pointer"
          @click="switchRole(role)"
        >
          <div class="flex items-center">
            <component :is="role.icon" class="w-5 h-5 text-gray-500 mr-3" />
            <div class="flex-1">
              <div class="font-medium text-gray-800">{{ role.name }}</div>
              <div class="text-sm text-gray-500 mt-1">{{ role.description }}</div>
            </div>
            <ChevronRight class="w-5 h-5 text-gray-400" />
          </div>
        </div>
      </div>
    </div>
    
    <!-- 角色切换确认弹窗 -->
    <div v-if="showConfirmDialog" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div class="bg-white rounded-lg max-w-sm w-full p-5">
        <h3 class="text-lg font-medium text-gray-800 mb-3">确认切换角色</h3>
        <p class="text-gray-600 mb-4">您确定要切换到 <span class="font-medium">{{ selectedRole.name }}</span> 角色吗？</p>
        <div class="flex space-x-3">
          <button 
            @click="confirmSwitch" 
            class="flex-1 py-2 bg-green-500 text-white rounded-lg font-medium hover:bg-green-600 transition-colors"
          >
            确认
          </button>
          <button 
            @click="cancelSwitch" 
            class="flex-1 py-2 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition-colors"
          >
            取消
          </button>
        </div>
      </div>
    </div>
  </BasePage>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import BasePage from '../../components/BasePage.vue';
import { User, GraduationCap, School, ChevronRight } from 'lucide-vue-next';

const router = useRouter();

// 可用角色列表
const availableRoles = [
  {
    id: 'college',
    name: '学院管理员',
    description: '管理学院内辅导员上报情况',
    icon: GraduationCap,
    path: '/college/role-confirm'
  },
  {
    id: 'school',
    name: '学校管理员',
    description: '管理全校上报情况',
    icon: School,
    path: '/school/role-query'
  }
];

// 角色切换确认
const showConfirmDialog = ref(false);
const selectedRole = ref(null);

// 选择角色
const switchRole = (role) => {
  selectedRole.value = role;
  showConfirmDialog.value = true;
};

// 确认切换
const confirmSwitch = async () => {
  // 模拟API请求
  await new Promise(resolve => setTimeout(resolve, 800));
  
  // 关闭弹窗
  showConfirmDialog.value = false;
  
  // 跳转到对应角色的确认页面
  router.push(selectedRole.value.path);
};

// 取消切换
const cancelSwitch = () => {
  showConfirmDialog.value = false;
  selectedRole.value = null;
};
</script>